<template>
    <view class="question-result-pop" :style="[resultPopStyle]">
        <template v-if='status != 3'>
            <view class="title item">
                {{info.title}}
            </view>
            <text class="desc item">
                {{info.desc}}
            </text>
            <template v-if='showScore'>
                <view class="score item">
                    <view class="title">
                        总计得分：
                    </view>
                    <score-star :score='result.comprehensiveScore' :size='40' :space='20'></score-star>
                </view>
            </template>
        </template>
        <template v-else>

        </template>
        <view class="bottom">
            <template v-if='status == 1'>
                <view class="button start" @click="tapStart">开始学习</view>
            </template>
            <template v-else-if="status == 2">
                <view class="button restart" @click="tapRestart">重新开始</view>
                <view class="button start" @click="tapStart">继续学习{{completeCount}}</view>
            </template>
            <template v-else-if="status == 3">
                <view class="button restart" @click="tapRestart">重新开始</view>
            </template>
        </view>
    </view>
</template>

<script>
    import {
        QUESTION_TYPE,
        getUnitWordAnswerResult,
        getTestAnswerResult,
        getAloudAnswerResult,
        contatTestAnswerResult,
        restartAnswer
    } from "../services/index.js";
    import AnswerResultModel from "../models/answerResultModel.js"
    const QUESTION_STATUS = {
        UNKNOW: {
            value: 0,
            name: "未知"
        },
        UNSTART: {
            value: 1,
            name: "未开始"
        },
        PROCESSING: {
            value: 2,
            name: "进行中"
        },
        COMPLETE: {
            value: 3,
            name: "已完成"
        }
    }
    import ScoreStar from "./score-star.vue";
    export default {
        components: {
            ScoreStar
        },
        data: function() {
            return {
                show: false,
                type: null,
                articleId: null,
                result: null,
                originResult: null,
                status: QUESTION_STATUS.UNKNOW.value
            }
        },
        computed: {
            resultPopStyle: function() {
                return {
                    visibility: this.show ? 'visible' : 'hidden'
                }
            },
            info: function() {
                let info = {};
                switch (this.type) {
                    case "word":
                        info = {
                            title: "词汇学习",
                            desc: "来学习一下文章中的生词难词吧！\n\n可以查看英文释义理解单词的含义，\n点击卡片翻面，可以查看单词中文解释。\n\n", // 左右滑动可以切换单词
                        }
                        break;
                    case "test":
                        info = {
                            title: "阅读理解",
                            desc: "根据文章内容，来做几道阅读理解练习一下吧！"
                        }
                        break;
                    case "aloud":
                        info = {
                            title: "全文朗读",
                            desc: "朗读文章可以加深文章理解，还能练习口语表达，积累语言素材。\n\n一起来挑战全文朗读吧！"
                        }
                        break;
                }
                return info;
            },
            showScore: function() {
                let ableType = this.type == 'word' || this.type == 'aloud';
                let ableStatus = this.status != 0 && this.status != 1;
                return ableType && ableStatus;
            },
            completeCount: function() {
                if (this.result) {
                    return ` ${this.result.already}/${this.result.total}`
                } else {
                    return "";
                }
            }
        },
        watch: {
            result: {
                handler: function(n) {
                    let status = QUESTION_STATUS.UNKNOW.value;
                    if (n) {
                        if (n.already == 0) {
                            status = QUESTION_STATUS.UNSTART.value;
                        } else if (n.isFinish) {
                            status = QUESTION_STATUS.COMPLETE.value;
                        } else {
                            status = QUESTION_STATUS.PROCESSING.value;
                        }
                    }
                    this.status = status;
                }
            }
        },
        methods: {
            showPop(show, type, articleId) {
                this.show = show;
                this.type = type;
                this.articleId = articleId;
                if (show) {
                    this.getResult().then(res => {
                        this.resultHandler(res);
                    });
                }
            },
            tapStart() {
                this.show = false;
                this.$emit('start');
            },
            tapRestart() {
                this.restart().then(res => {
                    return this.getResult();
                }).then(res => {
                    this.resultHandler(res);
                    this.tapStart();
                })
            },
            restart() {
                let promise = null;
                switch (this.type) {
                    case "word":
                        promise = restartAnswer(this.articleId, QUESTION_TYPE.WORD.value)
                        break;
                    case "test":
                        let p1 = restartAnswer(this.articleId, QUESTION_TYPE.SINGLE_CHOOSE.value);
                        let p2 = restartAnswer(this.articleId, QUESTION_TYPE.CLOZE.value);
                        let p3 = restartAnswer(this.articleId, QUESTION_TYPE.LINE_LINK.value);
                        promise = Promise.all([p1, p2, p3])
                        break;
                    case "aloud":
                        promise = restartAnswer(this.articleId, QUESTION_TYPE.ALOUD.value);
                        break;
                }
                return promise;
            },
            getResult() {
                let promise = null;
                switch (this.type) {
                    case 'word':
                        promise = getUnitWordAnswerResult(this.articleId)
                        break;
                    case 'test':
                        promise = getTestAnswerResult(this.articleId)
                        break;
                    case 'aloud':
                        promise = getAloudAnswerResult(this.articleId)
                        break;
                }
                return promise;
            },
            resultHandler(res) {
                switch (this.type) {
                    case 'word':
                        this.originResult = new AnswerResultModel(res);
                        this.result = new AnswerResultModel(res);
                        break;
                    case 'test':
                        this.originResult = res.map(item => {
                            return new AnswerResultModel(item);
                        })
                        this.result = new AnswerResultModel(contatTestAnswerResult(this.originResult));
                        break;
                    case "aloud":
                        this.originResult = new AnswerResultModel(res);
                        this.result = new AnswerResultModel(res);
                        break;
                }
                this.$emit('resultChange', {
                    result: this.result,
                    origin: this.originResult
                })
            }

        }
    }
</script>

<style lang="scss" scoped>
    .question-result-pop {
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 99;
        background: #fff;

        .item {
            margin: 30rpx;
            margin-bottom: 0;
        }

        .item:last-child {
            margin-bottom: 30rpx;
        }

        .title {
            font-size: 42rpx;
            font-weight: 800;
            color: #333;
            margin-bottom: 100rpx;
        }

        .desc {
            font-size: 32rpx;
            color: #333;
            margin-bottom: 200rpx;
        }

        .score {
            display: flex;
            flex-direction: column;

            .title {
                font-size: 40rpx;
                font-weight: 600;
                color: #4d69fc;
                margin-bottom: 30rpx;
                text-align: center;
            }

            .star {
                display: flex;
                flex-direction: row;
                align-items: center;

                .item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    margin: 0;
                    margin-right: 50rpx;
                }

                .item:last-child {
                    margin-right: 0;
                }
            }
        }

        .bottom {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            z-index: 100;

            .button {
                margin: 20rpx 30rpx;
                margin-right: 0;
                font-weight: 800;
                font-size: 32rpx;
                height: 90rpx;
                line-height: 90rpx;
                text-align: center;
                border-radius: 20rpx;
                flex: 1;
            }

            .button:last-child {
                margin-right: 30rpx;
            }

            .start {
                background: #e8f4fd;
                color: #1893ed;
            }

            .restart {
                background: #ffda17;
                color: #333;
            }
        }
    }
</style>